<template>
  <!-- 联动事件查询 -->
  <div class="linkage-event-query bigTableStyle">
    <!-- 表单 -->
    <div class="linkage-event-query-form">
      <el-form ref="form" :inline="true" :model="form" label-width="1.5rem">
        <el-row>
          <el-col :span="5">
            <el-form-item label="变电站：">
              <el-select
                v-model="form.stationName"
                size="small"
                placeholder="请选择"
                clearable
                filterable
              >
                <el-option
                  v-for="item in stationName_options"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="子系统：">
              <el-select v-model="form.sysId" size="small" placeholder="请选择" clearable filterable>
                <el-option
                  v-for="item in sysId_options"
                  :key="item.value"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="设备名称：">
              <el-input v-model="form.deviceName" placeholder="请输入内容" clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="联动时间：">
              <el-date-picker
                :style="{width: '100%'}"
                v-model="form.strtimeedntime"
                value-format="yyyy-MM-dd"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <div class="endbox">
              <el-button type="primary" @click="onSearch">查询</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="linkage-event-query-table">
      <el-table
        border
        :data="tableData"
        style="width: 100%"
        height="100%"
        @selection-change="handleSelectionChange"
        :row-class-name="tableRowClassName"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.5)"
      >
        <el-table-column type="selection" width="60"></el-table-column>
        <el-table-column prop="myIndex" label="序号" width="60"></el-table-column>
        <el-table-column prop="stationName" label="变电站" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="subSys" label="所属子系统" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="deviceName" label="设备名称" :show-overflow-tooltip="true"></el-table-column>
        <!-- <el-table-column prop="source" label="来源" :show-overflow-tooltip="true"></el-table-column> -->
        <el-table-column prop="reason" label="联动原因" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="deviceName" label="联动设备" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="statusName" label="联动结果" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="createTime" label="联动时间" width="180" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="confirm" label="是否确认" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <div class="centerbox">{{scope.row.confirm==='1'?'已确认':'未确认'}}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="100">
          <template slot-scope="scope">
            <div class="centerbox">
              <el-button type="primary" @click="tableEdit(scope.row)">确认</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="实时视频" fixed="right" width="100">
          <template slot-scope="scope">
            <div class="centerbox">
              <el-button type="primary" @click="videoDetail(scope.row)">详情</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="linkage-event-query-page centerbox elPaginationStyle">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pages.page"
        :page-sizes="[10, 20, 30]"
        :page-size="pages.pageSize"
        layout="total,prev, pager, next,sizes, jumper"
        :total="pages.totalSize"
      ></el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { objType } from "@/utils/interface";
import { AuxiliaryMonitorModule } from "@/store/modules/AuxiliaryMonitor";
import { publicAPIModule } from "@/store/modules/public";
// import videoDetail from "./videoDetail.vue";
import time from "@/utils/time";
interface optionList {
  value: string;
  label: string;
}
interface tableDataType {
  stationName: string;
  area: string;
  sysId: string;
  monitoringPoints: string;
  alarmValueLimit: string | number;
  lowerLimitAlarmValue: string | number;
  maximumAttention: string | number;
  payAttentionToValueTheLowerLimit: string | number;
  popup: string;
  whetherToPush: string;
}
interface pagesType {
  pageSize: number;
  page: number;
  totalSize: number;
}
@Component({
  // components: { videoDetail },
})
export default class extends Vue {
  @Prop({ default: () => [] })
  smartData: any;
  // 弹窗状态
  editStatus: boolean = false;
  // 表单
  public form = {
    stationName: "",
    deviceName: "",
    sysId: "",
    strtimeedntime: "",
  };

  // 表格数据
  tableData: Array<tableDataType> = [];
  tableSelect: Array<object> = [];
  //   分页
  pages: pagesType = {
    pageSize: 20,
    page: 1,
    totalSize: 10,
  };
  loading: boolean = true;

  // 获得上级页面传参
  get newSmartData() {
    let smartData = this.smartData;
    return smartData;
  }

  get stationName_options() {
    return publicAPIModule.stationList;
  }

  get area_options() {
    return publicAPIModule.getAreaDictList;
  }

  get sysId_options() {
    return publicAPIModule.querySubSystemList;
  }

  fetch() {
    // console.log(this.form);
    let startTime = "";
    let endTime = "";
    if (this.form.strtimeedntime[0]) {
      startTime = this.form.strtimeedntime[0] || "";
      if (startTime) {
        startTime = `${startTime} 00:00:00`;
      }
      // startTime=new Date(startTime)
    }
    if (this.form.strtimeedntime[1]) {
      endTime = this.form.strtimeedntime[1] || "";
      if (endTime) {
        endTime = `${endTime} 23:59:59`;
      }
      // endTime=new Date(endTime)
    }
    var params: any = {
      deviceName: this.form.deviceName,
      endTime,
      page: this.pages.page,
      size: this.pages.pageSize,
      startTime,
      station: this.form.stationName,
      systemId: this.form.sysId,
    };
    // console.log(params);

    (this as any).$services
      .queryLinkageRecord({ method: "post", data: params })
      .then((result: any) => {
        // console.log(result);
        let data = result.data || {};
        let tableData = data.records || [];
        let statusObj = {
          "1": "联动开始",
          "2": "联动完成",
        };
        let page = params.page;
        let size = params.size;
        this.tableData = tableData.map((v, i) => {
          v.statusName = statusObj[v.status] || "";
          v.createTime = time(v.createTime);
          v.myIndex = (page - 1) * size + i + 1;
          return v;
        });
        this.pages = {
          pageSize: data.size,
          page: data.current,
          totalSize: data.total,
        };
        this.loading = false;
      })
      .catch((err: object) => {
        console.log(err);
        this.loading = false;
      });
  }

  // 表单里的查询
  onSearch() {
    this.pages.page = 1;
    this.fetch();
  }

  // -------------------表格选择事件--------------------
  handleSelectionChange(val: any): void {
    // console.log(val);
    this.tableSelect = val;
  }
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: objType): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
  //   表格里的确认
  tableEdit(row: any): void {
    if (row.confirm === "2") {
      this.$confirm("是否确认？", "", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // console.log("row:",row);
          let form = {
            id: row.id,
          };
          // console.log("form:",form);
          (this as any).$services
            .confirmLinkageRecord({
              data: form,
              method: "post",
              postparams: true,
            })
            .then((result: any) => {
              // console.log(result);
              if (result.code === 200) {
                this.fetch();
                this.$message({
                  showClose: true,
                  message: result.message,
                  type: "success",
                });
              } else {
                this.$message({
                  showClose: true,
                  message: result.message,
                  type: "warning",
                });
              }
            })
            .catch((err: object) => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    }
  }
  //   表格里的视频详情
  videoDetail(row: any): void {
    console.log(row);

    // 根据某个字段 判断进入哪个视频弹窗
    if (row.stationId == "100435539") {
      this.$router.push({
        path: "videodetail",
        query: {
          id: row.id,
        },
      });
    } else {
      // this.$router.push({
      //   path: "videodetail2",
      //   query: {
      //     id: row.id,
      //   },
      // });
      this.liandong(row);
    }
  }
  // 联动
  liandong(row) {
    console.log(row);
    // 110kv
    if (
      row.deviceName.indexOf("110kV") === -1 &&
      row.deviceName.indexOf("10kV") != -1
    ) {
      this.toFzLiandong(row);
      return;
    }
    if (row.pmsId === "0" || !row.pmsId) {
      this.toFzLiandong(row);
    } else {
      this.getYbyJg(row, this.toLiandong);
      // this.toLiandong(row);
    }
  }
  getYbyJg(row, cb) {
    let params = {
      bdzId: row.stationId,
    };
    (this as any).$services
      .getYbyJg({ data: params, method: "get" })
      .then((result: any) => {
        let data = result.data || [];
        cb(row, data);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  // 前往辅助监控联动
  toFzLiandong(row) {
    console.log(row);
    let query = {
      id: row.id,
      deviceId: row.deviceId,
      stationId: row.stationId,
      bayId: row.bayId,
      stationName: row.stationName,
      reason: row.reason,
      createTime: row.createTime,
    };
    this.$router.push({
      name: "videodetail2",
      query: query,
    });
  }
  // 前往联动页面
  toLiandong(row, arr) {
    let path = "/operationmonitor/liandong";
    let BAY_ID_Arr = arr.map((v) => {
      return v.OBJ_ID;
    });
    if (BAY_ID_Arr.indexOf(row.bayId) > -1) {
      path = "/operationmonitor/jgliandong";
    }
    let query = {
      ID: row.id,
      BDZID: row.stationId,
      PMSID: row.pmsId,
      SBID: row.deviceId,
      BDZMC: row.stationName,
      BAYNAME: row.bayName,
      BAYID: row.bayId,
      SBMC: row.deviceName,
      myId: row.id,
      GJSJ: row.createTime,
      GJNR: row.reason,
      JCLX: row.proType,
      SBLX: row.sblx,
      SBCODE: row.sbCode,
    };
    this.$router.push({
      path,
      // path: "/operationmonitor/jgliandong",
      query: query,
    });
  }
  //   -------------------分页----------------------------
  handleSizeChange(val: any) {
    this.pages.pageSize = val;
    this.fetch();
  }
  // 分页事件
  handleCurrentChange(val: any) {
    this.pages.page = val;
    this.fetch();
  }
  mounted() {
    let query = this.$route.query || {};
    this.form = Object.assign({}, this.form, query);
    // 跳转过来带的查询条件
    // console.log("this.newSmartData:",this.newSmartData);
    // console.log("this.stationName_options:",this.stationName_options);
    console.log(query);
    console.log(this.form);
    if (this.newSmartData.stationName) {
      this.stationName_options.map((v: any, i: any) => {
        if (v.name == this.newSmartData.stationName) {
          this.form.stationName = v.code;
        }
      });
    }
    if (this.newSmartData.deviceName) {
      this.form.deviceName = this.newSmartData.deviceName;
    }
    this.fetch();
  }
}
</script>

<style lang="scss" scoped>
.linkage-event-query {
  width: 18.8rem;
  height: 100%;
  &-form {
    width: 100%;
    height: 0.8rem;
    padding: 0.2rem 0 0 0;
    box-sizing: border-box;
  }
  &-table {
    width: 100%;
    height: calc(100% - 1.2rem);
  }
  &-page {
    width: 100%;
    height: 0.4rem;
  }
}
</style>
<style lang="scss">
.linkage-event-query {
  .el-form-item__content {
    width: calc(100% - 1.5rem);
    .el-select {
      width: 100%;
    }
  }
  .el-form {
    .el-form-item {
      width: 100%;
      margin-bottom: 0.2rem;
    }
  }
  .el-button--primary {
    width: 1.1rem;
  }
}
</style>

